packages/dashboard/src/lib/components/shared/customer-selector.tsx (2)

70-78: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Validation error messages bypass the i18n system.

createCustomerFormSchema hardcodes English error strings ('First name is required', 'Last name is required', 'Email address is required') instead of using Trans/useLingui's t like the rest of this component (e.g. placeholders, labels). Given the huge number of locale catalogs in this repo, these validation messages will always render in English regardless of the admin's selected language.

♻️ Suggested fix using useLingui's `t`

-const createCustomerFormSchema = z.object({
-    title: z.string().optional(),
-    firstName: z.string().min(1, { message: 'First name is required' }),
-    lastName: z.string().min(1, { message: 'Last name is required' }),
-    emailAddress: z.string().min(1, { message: 'Email address is required' }).email(),
-    phoneNumber: z.string().optional(),
-});
+function useCreateCustomerFormSchema() {
+    const { t } = useLingui();
+    return z.object({
+        title: z.string().optional(),
+        firstName: z.string().min(1, { message: t`First name is required` }),
+        lastName: z.string().min(1, { message: t`Last name is required` }),
+        emailAddress: z.string().min(1, { message: t`Email address is required` }).email(),
+        phoneNumber: z.string().optional(),
+    });
+}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dashboard/src/lib/components/shared/customer-selector.tsx` around
lines 70 - 78, Replace the hardcoded English validation messages in
createCustomerFormSchema with localized messages using the component’s
useLingui/t pattern. Ensure the schema is created where the translation function
is available, and apply localized text to the firstName, lastName, and
emailAddress required validations.

---

70-76: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Zod .min() message option is deprecated in v4 in favor of error.

Confirmed via Zod v4 migration docs: the message param is "still supported but deprecated," replaced by the unified error parameter. Functionally fine today, but worth migrating for forward compatibility.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dashboard/src/lib/components/shared/customer-selector.tsx` around
lines 70 - 76, Update the createCustomerFormSchema validation rules to use Zod
v4’s error option instead of the deprecated message option for the firstName,
lastName, and emailAddress min-length checks, preserving the existing validation
text and behavior.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/dashboard/src/lib/components/shared/customer-selector.tsx (2)

70-78: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Validation error messages bypass the i18n system.

createCustomerFormSchema hardcodes English error strings ('First name is required', 'Last name is required', 'Email address is required') instead of using Trans/useLingui's t like the rest of this component (e.g. placeholders, labels). Given the huge number of locale catalogs in this repo, these validation messages will always render in English regardless of the admin's selected language.

♻️ Suggested fix using useLingui's `t`

-const createCustomerFormSchema = z.object({
-    title: z.string().optional(),
-    firstName: z.string().min(1, { message: 'First name is required' }),
-    lastName: z.string().min(1, { message: 'Last name is required' }),
-    emailAddress: z.string().min(1, { message: 'Email address is required' }).email(),
-    phoneNumber: z.string().optional(),
-});
+function useCreateCustomerFormSchema() {
+    const { t } = useLingui();
+    return z.object({
+        title: z.string().optional(),
+        firstName: z.string().min(1, { message: t`First name is required` }),
+        lastName: z.string().min(1, { message: t`Last name is required` }),
+        emailAddress: z.string().min(1, { message: t`Email address is required` }).email(),
+        phoneNumber: z.string().optional(),
+    });
+}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dashboard/src/lib/components/shared/customer-selector.tsx` around
lines 70 - 78, Replace the hardcoded English validation messages in
createCustomerFormSchema with localized messages using the component’s
useLingui/t pattern. Ensure the schema is created where the translation function
is available, and apply localized text to the firstName, lastName, and
emailAddress required validations.

---

70-76: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low value

Zod .min() message option is deprecated in v4 in favor of error.

Confirmed via Zod v4 migration docs: the message param is "still supported but deprecated," replaced by the unified error parameter. Functionally fine today, but worth migrating for forward compatibility.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dashboard/src/lib/components/shared/customer-selector.tsx` around
lines 70 - 76, Update the createCustomerFormSchema validation rules to use Zod
v4’s error option instead of the deprecated message option for the firstName,
lastName, and emailAddress min-length checks, preserving the existing validation
text and behavior.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/dashboard/src/lib/components/shared/customer-selector.tsx (1)

196-283: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

activeTab doesn't reset when the popover is closed programmatically.

onOpenChange resets activeTab to 'existing' only when !isOpen, but the onSelect/onSubmit callbacks close the popover via setOpen(false) directly (bypassing the controlled component's onOpenChange handler, which typically only fires in response to user-driven interactions like outside-click or Escape, not programmatic prop changes). After successfully creating a new customer, activeTab stays 'new'; reopening the popover next time will show the "Create new customer" tab instead of resetting to "Existing customer".

🐛 Suggested fix

                         <TabsContent value="existing">
                             <div className="mt-2 rounded-md border">
                                 <CustomerSearch
                                     onSelect={customer => {
                                         props.onSelect(customer);
                                         setOpen(false);
+                                        setActiveTab('existing');
                                     }}
                                 />
                             </div>
                         </TabsContent>
                         <TabsContent value="new">
                             <div className="mt-2">
                                 <CreateCustomerForm
                                     onSubmit={input => {
                                         props.onCreateNew?.(input);
                                         setOpen(false);
+                                        setActiveTab('existing');
                                     }}
                                 />
                             </div>
                         </TabsContent>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

export function CustomerSelector(props: CustomerSelectorProps) {
    const [open, setOpen] = useState(false);
    const [activeTab, setActiveTab] = useState<string>('existing');

    const trigger = (
        <PopoverTrigger
            render={
                <Button
                    variant="outline"
                    size="sm"
                    type="button"
                    disabled={props.readOnly}
                    className="gap-2"
                />
            }
        >
            <Plus className="h-4 w-4" />
            {props.label ?? <Trans>Select customer</Trans>}
        </PopoverTrigger>
    );

    // When inline creation is not enabled, preserve the original lightweight popover behaviour.
    if (!props.allowCreateNew) {
        return (
            <Popover open={open} onOpenChange={setOpen}>
                {trigger}
                <PopoverContent className="p-0 w-[350px]" align="start">
                    <CustomerSearch
                        onSelect={customer => {
                            props.onSelect(customer);
                            setOpen(false);
                        }}
                    />
                </PopoverContent>
            </Popover>
        );
    }

    return (
        <Popover
            open={open}
            onOpenChange={isOpen => {
                setOpen(isOpen);
                if (!isOpen) {
                    setActiveTab('existing');
                }
            }}
        >
            {trigger}
            <PopoverContent className="w-[420px] p-0" align="start">
                <div className="p-4">
                    <Tabs value={activeTab} onValueChange={setActiveTab}>
                        <TabsList className="grid w-full grid-cols-2">
                            <TabsTrigger value="existing">
                                <Link className="mr-2 h-4 w-4" />
                                <Trans>Existing customer</Trans>
                            </TabsTrigger>
                            <TabsTrigger value="new">
                                <Plus className="mr-2 h-4 w-4" />
                                <Trans>Create new customer</Trans>
                            </TabsTrigger>
                        </TabsList>
                        <TabsContent value="existing">
                            <div className="mt-2 rounded-md border">
                                <CustomerSearch
                                    onSelect={customer => {
                                        props.onSelect(customer);
                                        setOpen(false);
                                        setActiveTab('existing');
                                    }}
                                />
                            </div>
                        </TabsContent>
                        <TabsContent value="new">
                            <div className="mt-2">
                                <CreateCustomerForm
                                    onSubmit={input => {
                                        props.onCreateNew?.(input);
                                        setOpen(false);
                                        setActiveTab('existing');
                                    }}
                                />
                            </div>
                        </TabsContent>
                    </Tabs>
                </div>
            </PopoverContent>
        </Popover>
    );
}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/dashboard/src/lib/components/shared/customer-selector.tsx` around
lines 196 - 283, Reset activeTab to 'existing' whenever the popover is closed
programmatically: update the onSelect callback in CustomerSearch and the
onSubmit callback in CreateCustomerForm to call setActiveTab('existing')
alongside setOpen(false). Keep the existing onOpenChange reset for user-driven
closures.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes